<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/wesite/view/common/base.jsp"%>
<!doctype html>
<html>
<head>
    <meta  charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品列表</title>
    <%@ include file="/wesite/view/common/common.jsp"%>
    <script src="${webctx }/script/aui-scroll.js"></script>
    <script src="${webctx }/script/list-product.js"></script>
    <script src="${ctx }/plugins/artTemplate/dist/template.js"></script>
</head>
<style>
    .product-list-con.large-list .list-row-container{
        margin-left: 0;
    }
    .product-list-con.large-list ul li{
        position: relative;
        width: 50%;
        height: auto;
        border-right: #f2f2f2 .1066667rem solid;
        border-bottom: #f2f2f2 .1066667rem solid;
        overflow: hidden;
        float: left;
        background: #fff;
        padding: .533333rem 0.8rem;
    }
    .product-list-con.large-list ul li:nth-last-child(1) {
        border-bottom: none;
    }
    .product-list-con.large-list ul li > a{
        display: block;
        width: 8.4rem;
        height: 8.4rem;
    }
    .product-list-con.large-list ul li img{
        width: 100%;
        height: auto;
    }
    .product-list-con.large-list ul li h3{
        width:8.4rem;
        margin-bottom: .333333rem;
        font-size: 0.8rem;
        line-height: 1.5;
        color: #222;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .product-list-con.large-list ul li h3 a{
        font-size: 0.8rem;
    }
    .product-list-con.large-list ul li span.company{
        display: block;
        width: 100%;
        line-height: 1;
        font-size: 0.64rem;
        color: #999;
        margin-bottom: .266667rem;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .product-list-con.large-list ul li span.specifications{
        display: block;
        width: 100%;
        line-height: 1.1;
        font-size: 0.64rem;
        color: #999;
        margin-bottom: .53333rem;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .product-list-con.large-list ul li span.price i.a{
        font-size: 0.8rem;
        color: #ff6767;
        font-family: "Microsoft YaHei";
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .product-list-con.large-list ul li .ico-shopping-cart{
        z-index: 5;
        position: absolute;
        bottom: .533333rem;
        right: 1.066666rem;
        width: 1.253333rem;
        height: 1.1466667rem;
    }
    .product-list-con.large-list .ico-shopping-cart img{
        width: 100%;
        height: auto;
    }

    .product-list-con.large-list ul li .rg{
        margin-left: 0;
    }
    .product-list-con.list-li-bot ul li:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 5.33334rem;
        width: 100%;
        height: 1px;
        background-color: #eee;
    }
</style>
<body>
    <div class="product-list" id="test1">
        <div class="product-list-tab">
            <ul class="sorts" id="J_sorts">
                <li class="sort <c:if test="${ordertype==0 || empty ordertype }">cur</c:if>" ordertype="" orderby="0"><a href="javascript:;">综合<span></span></a></li>
                <li class="line"><span></span></li>
                <li class="sort <c:if test="${ordertype==1}">cur</c:if>" ordertype="1" orderby="0"><a href="javascript:;">人气<span></span></a></li>
                <li class="line"><span></span></li>
                <li class="sort <c:if test="${ordertype==2}">cur</c:if>" ordertype="2" orderby="0"><a href="javascript:;">销量<span></span></a></li>
                <li class="line"><span></span></li>
                <li class="i-price <c:if test="${ordertype==3}">cur</c:if>" ordertype="3" orderby="<c:if test="${ordertype==3 }">${orderby }</c:if>"><a href="javascript:;">
                    价格
                    <span class="ico1 ico-c"></span>
                    <c:if test="${orderby==0}">
                        <span class="ico1 ico-hid"></span>
                    </c:if>
                    <c:if test="${orderby==1}">
                        <span class="ico1 ico-hid ico2"></span>
                    </c:if>

                </a></li>
                <li class="line"><span></span></li>
            </ul>
            <!-- 大图列表切换  （列表切换class加一个list-of） -->
            <a class="large" href="javascript:;"></a>
        </div>
        <div class="h88"></div>
        <div class="product-list-con list-li-bot" style="display: block;">
            <ul class="list-row-container" id="productspanel"></ul>
        </div>
    </div>



    <%@ include file="/wesite/view/common/bottom.jsp"%>
    <input name="clscode" value="${clscode }" type="hidden">
    <input name="pageno" value="${pageno }" type="hidden">
    <script type="text/html" id="productHtml_list">
        {{each list as value i}}
        <li>
            <a href="{{ctx}}/we/product/{{value.id}}" >
                <img src="{{fileserver}}{{value.photo}}" onerror="this.src='{{ctx}}/wesite/images/noimg.jpg'">
            </a>
            <div class="rg">
                <h3><a href="{{ctx}}/we/product/{{value.id}}">{{value.productname+value.name}}</a></h3>
                <span class="company">{{value.b_chanjia}}</span>
                <span class='specifications'>{{value.b_guige}}</span>
                <span class="price">
                    <i class="a">
                        {{if isuserauth && islogin}}
                        {{if value.canbuy == "1" }}
                        <span>￥{{value.price}}</span>

                        {{if value.promotion_coupon}}
                <em>券</em>
                {{/if}}

                            {{if value.promotion_money_off }}
                            <em>满减</em>
                            {{/if}}
                            {{if value.promotion_purchase_gift }}
                            <em>满赠</em>
                            {{/if}}
                            {{if value.promotion_buy_send }}
                            <em>买送</em>
                            {{/if}}
                            {{if value.promotion_flash_sale }}
                            <em>特价</em>
                            {{/if}}
                        {{/if}}
                        {{if value.canbuy == "0"}}
                        <font style="line-height:20px">不在本区域销售</font>
                        {{/if}}
                        {{else if !islogin}}

                        <font style="line-height:20px">登录可见</font>{{else}}<font style="line-height:20px">审核通过可见</font>{{/if}}</i></span>
            </div>
            {{if isuserauth && islogin}}
            <%-- 参加单品的商品 --%>
            {{if value.promotion_flash_sale }}
            {{if !value.fs_amount || value.canbuy == "0" }}
            <a class="ico-shopping-cart" href="javascript:void(0);"><img src="${ctx}/wesite/images/ico-shopping-cart-no.png"></a>
            {{/if}}
            {{if value.fs_amount>0 && value.canbuy == "1"  }}
            <a class="ico-shopping-cart" href="javascript:;" onclick="stopBubble(event,'{{value.id}}')"><img src="${ctx}/wesite/images/ico-shopping-cart.png"></a>
            {{/if}}
        <%-- 没参加单品促销--%>
            {{else}}
            {{if value.amount<=0 || value.canbuy == "0"  }}
            <a class="ico-shopping-cart" href="javascript:void(0);"><img src="${ctx}/wesite/images/ico-shopping-cart-no.png"></a>
            {{/if}}
            {{if value.amount>0 && value.canbuy == "1"  }}
            <a class="ico-shopping-cart" href="javascript:;" onclick="stopBubble(event,'{{value.id}}')"><img src="${ctx}/wesite/images/ico-shopping-cart.png"></a>
            {{/if}}
            {{/if}}
            <%-- 没有登陆和没审核--%>
            {{else}}
            <a class="ico-shopping-cart" href="javascript:;" onclick="stopBubble(event,'{{value.id}}')"><img src="${ctx}/wesite/images/ico-shopping-cart.png"></a>

            {{/if}}
            <%-- 没参加单品 --%>
        </li>
        {{/each}}

    </script>
    <%@ include file="/wesite/view/common/popup-menu.jsp"%>
    <%@ include file="/wesite/view/common/go-top.jsp"%>
</body>
<script type="text/javascript">


    apiready = function(){
        api.parseTapmode();
    }

    $(function () {
        var tru = $(".i-price").hasClass("cur");
        if(tru == true){
           $(".ico-c").hide();
        } else {
            $(".ico-hid").hide();
            $(".ico-c").show();
        }
    })

    //大图和列表切换
    $(".large").click(function(){
        var ts = $(this);
        var large = $(".product-list-con");
        var rg = $(".rg");
        if(ts.hasClass("list-of")){
            sessionStorage.setItem("type","list");
            ts.removeClass("list-of");//显示大图图标
            large.removeClass("large-list");//显示列表（小图模式）内容
            large.addClass("list-li-bot");//控制列表（小图模式）内容的底边框线
            rg.removeClass("large-h-wid");//控制列表（小图模式）的内容的宽度
        } else {
            sessionStorage.setItem("type","large");
            ts.addClass("list-of");//显示列表图标
            large.addClass("large-list");//显示大图内容
            large.removeClass("list-li-bot");
            rg.addClass("large-h-wid");
        }
    });

    function showType(){
        var ts = $(".large");
        var large = $(".product-list-con");
        var rg = $(".rg");
        if(sessionStorage.getItem("type") == "list"){
            ts.removeClass("list-of");//显示大图图标
            large.removeClass("large-list");//显示列表（小图模式）内容
            large.addClass("list-li-bot");//控制列表（小图模式）内容的底边框线
            rg.removeClass("large-h-wid");//控制列表（小图模式）的内容的宽度
        } else {
            ts.addClass("list-of");//显示列表图标
            large.addClass("large-list");//显示大图内容
            large.removeClass("list-li-bot");
            rg.addClass("large-h-wid");
        }
    }

    /*切换筛选条件样式*/
    /**$('.product-list-tab li').on('click',function(){
        $(this).addClass('cur');
        $(this).siblings().removeClass('cur')
    })*/

    var IPageNo=1;
    var productpage=1;
    $(function(){
        showType();
        loadProductsNew();
        $('#J_sorts li').click(function(){
            $('#J_sorts li').removeClass("cur");
            $(this).addClass("cur");
            sort();
        });

        var bottomHeight = $("div.h98").height() * 2;
        var scroll = new auiScroll({
            listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance: bottomHeight //判断到达底部的距离，isToBottom为true
        }, function (ret) {
            if (ret.isToBottom) {
                if( IPageNo > 0 && IPageNo<=productpage){
                    loadProductsNew();
                }
            }});
    })

</script>
</html>